<template>
<div class="logForm">
    <i-form ref="formInline" :model="formInline" :rules="ruleInline" label-position="left"  :label-width="80">
        <Form-item prop="phone"  label="账号">
            <i-input type="text" v-model="formInline.phone" placeholder="用户名/手机号">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </i-input>
        </Form-item>
        <Form-item prop="password" label="密码">
            <i-input type="password"  v-model="formInline.password" placeholder="密码">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </i-input>
        </Form-item>
        <Form-item>
            <i-button type="primary" @click="handleSubmit('formInline')">登录</i-button>
             <i-button type="ghost" @click="toReg()">没有账户?注册</i-button>
        </Form-item>
    </i-form>
</div>
</template>
<script>
import ws from '../util/websocket'
export default {
    data () {
        return {
            formInline: {
                phone: '',
                password: ''
            },
            ruleInline: {
                phone: [
                    { required: true, message: '请填写账号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleSubmit (name) {
            let that = this
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios.post('api/userLogin/toLogin', this.formInline
                    ).then(function (response) {
                        if (response.data.code === 200) {
                            sessionStorage.setItem('user', JSON.stringify(response.data.data))
                            sessionStorage.setItem('id', response.data.data.id)
                            ws()
                            that.$router.push('/allAccount')
                        } else {
                            that.$Message.error(`${response.data.msg}`)
                        }
                    })
                } else {
                    this.$Message.error('表单验证失败!')
                }
            })
        },
        toReg () {
            this.$router.push('/reg')
        }
    }
}
</script>
<style lang="scss" scoped>
.logForm{
    margin: 2rem;
    width: 20rem;
}
</style>
